<template>
    <a-row>
        <a-col :span="24">
            <div class="card_top">
                <div style="display: flex;align-items: center;gap: 10px;">
                    <div>
                        <a-avatar :size="70">
                            <img src="../../assets/avatar.png" alt="">
                        </a-avatar>
                    </div>
                    <div style="text-align: left;">
                        <p>您好，问栢，今天又是充满活力的一天！</p>
                        <p>2025-03-06 12:00:00</p>
                    </div>
                </div>
                <div style="display: flex;align-items: center;gap: 10px;">
                    <div>
                        <p>帖子数量</p>
                        <p>1693</p>
                    </div>
                    <div>
                        <p>代办事项</p>
                        <p>6</p>
                    </div>
                </div>
            </div>
        </a-col>
    </a-row>

    <div class="card" style="margin-top: 12px;padding: 10px;">
        <a-row :gutter="12">
            <a-col v-for="(item, index) in cardData" :key="index" :span="6">
                <div :class="['card', `card-${index + 1}`]">
                    <div style="text-align: left; color: #fff;">{{ item.title }}</div>
                    <div class="card_content">
                        <component :is="item.icon" size="30px" style="color: #fff;" />
                        <div style="font-size: 30px;font-weight: bold;color: #fff;">{{ item.value }}</div>
                    </div>
                </div>
            </a-col>
        </a-row>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const cardData = ref([
    {
        title: '访问量',
        icon: 'icon-book',
        value: 10000
    },
    {
        title: '成交额',
        icon: 'icon-bar-chart',
        value: 10000
    },
    {
        title: '下载量',
        icon: 'icon-download',
        value: 10000
    },
    {
        title: '成交量',
        icon: 'icon-select-all',
        value: 10000
    }

])
</script>
<style scoped>
.card_top {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px;
    border-radius: 10px;
}

.card {
    padding: 30px 20px;
    border-radius: 8px;
    background-color: white;
}

.card_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.card-1 {
    background: linear-gradient(to right, #e84888, #bb54a4);
}

.card-2 {
    background: linear-gradient(to right, #835dbf, #5345b4);
}

.card-3 {
    background: linear-gradient(to right, #57cbf1, #709fe3);
}

.card-4 {
    background: linear-gradient(to right, #fcb829, #f58354);
}
</style>
